<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="modelPageNo"
      v-model:page-size="modelPageSize"
      :background="background"
      layout="prev, pager, next, jumper, -> , total"
      :total="total"
      @current-change="onChangePage"
      @size-change="onChangeSize"
    />
  </div>
</template>

<script setup lang="ts" name="vPagination">
import { defineEmits, defineProps, ref, onMounted} from 'vue'
const modelPageNo = ref(1)
const modelPageSize = ref(5)
const props = defineProps({
  // 总条目数
  total: {
    type: Number,
    default: 0
  },
  // 当前页
  pageNo: {
    type: Number,
    default: 1
  },
  // 每页数
  pageSize: {
    type: Number,
    default: 5
  },
  // 背景颜色
  background: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['changePage', 'changeSize'])
// 触发page
const onChangePage = (page: number) => {
  emit('changePage', page)
}
// 触发size
const onChangeSize = (size: number) => {
  emit('changeSize', size)
}
onMounted(() => {
  modelPageNo.value = props.pageNo
  modelPageSize.value = props.pageSize
})
</script>

<style scoped>

</style>